<template>
    <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="userlist"
            :loading="loading"
    >
        <template #bodyCell="{ column, text ,record}">
            <template v-if="column.dataIndex === 'avatar'">
                <a-avatar
                    size="normal"
                    shape="square"
                    :src="'data:image/jpeg;base64,'+record.base64Data">
                </a-avatar>
            </template>
            <template v-if="column.dataIndex === 'state'">
                {{record.isBanned?'禁言':'正常'}}
            </template>
            <template v-if="column.dataIndex === 'control'">
                <a-popconfirm
                    title="确认要更改用户状态吗?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="confirm(record)"
                    @cancel="cancel(record)"
                >
                    <a-switch v-model:checked="record.isBanned" checked-children="禁言" un-checked-children="正常" />

                </a-popconfirm>
            </template>

        </template>
    </a-table>
</template>

<script setup>
import {ref,onMounted} from "vue";
import axios from 'axios'
import { message } from 'ant-design-vue';
import { useUserStore } from '../../../stores/user';

const userStore  = useUserStore()

const columns = [
    {
        title: '头像',
        dataIndex: 'avatar',
        width: '5%',
    },
    {
      title: '名称',
      dataIndex: 'nickname',
    },
    {
        title: '状态',
        dataIndex: 'state',
        width: '20%',
    },
    {
        title: '操作',
        dataIndex: 'control',
        width: '15%',
    },
];

const userlist = ref([])

const loadUsers = ()=>{
    axios.get("/admin/user/list").then(res => {
        userlist.value = res.data.data
    })
}

onMounted(() => {
    loadUsers()
})

const confirm = (user) => {
    axios.put("/admin/user/updateIsBanned",user).then(res => {
        if(res.data.success){
            message.success("修改成功")
        }
    })
}

const cancel = (user)=>{
    user.isBanned = !user.isBanned
}

</script>

<style scoped>

</style>